import {
    Table,
    Modal,
    Button,
    Form,
    Input,
    message,
    Radio
} from 'antd';
//import { useState } from 'react';
//import './RoleManagement.css'
import { useState, useEffect } from 'react';
//import { useNavigate } from "react-router-dom";
import { CheckCircleTwoTone } from '@ant-design/icons';
import styles from './RoleManagement.module.css'
import myAxios from "../../../utils/myAixos";
const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
function getNewDate() {
    var date = new Date();
    var transverse = "-";
    var Verticalpoint = ":";
    var month = date.getMonth() + 1;//获取月份
    var strDate = date.getDate();//获取具体的日期           
    var strHour = date.getHours();//获取...钟点
    var strMinute = date.getMinutes();//获取分钟数
    var strSeconde = date.getSeconds();//获取秒钟数
    //判断获取月份 、 具体的日期 、...钟点、分钟数、秒钟数 是否在1~9
    //如果是则在前面加“0”
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 1 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    if (strHour >= 1 && strHour <= 9) {
        strHour = "0" + strHour
    }
    if (strMinute >= 1 && strMinute <= 9) {
        strMinute = "0" + strMinute;
    }

    if (strSeconde >= 1 && strSeconde <= 9) {
        strSeconde = "0" + strSeconde;
    }
    //时间日期字符串拼接
    var NewDate = date.getFullYear() + transverse + month + transverse + strDate + " " +
        strHour + Verticalpoint + strMinute + Verticalpoint + strSeconde;
    //返回拼接字符串
    return NewDate;
}
const RoleManagement = () => {
    const columns = [
        {
            title: '角色名称',
            dataIndex: 'r_bumen',
            align: 'center'
        },
        {
            title: '角色数量',
            dataIndex: 'r_number',
            align: 'center'
        },
        {
            title: '添加时间',
            dataIndex: 'r_time',
            align: 'center'
        },
        {
            title: '是否启用',
            dataIndex: 'r_status',
            align: 'center'
        },
        {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (_, record) => (
                <div className={styles["hh"]}>
                    <span onClick={() => { edit(record) }}>权限设置</span>
                    <span onClick={() => { deleteHw1(record) }}>删除</span>
                </div>
            ),
        },
    ];
    const [form] = Form.useForm();
    const { TextArea } = Input;
    //const navigate = useNavigate();
    //添加
    const [add, setAdd] = useState(false);
    //删除
    const [open, setOpen] = useState(false);
    //删除id
    const [deleteId, setDeleteId] = useState()
    //权限设置开关
    const [up, setUp] = useState(false);
    //权限数据
    const [upData, setUpData] = useState()
    //权限默认数据
    const [defaultData, setDefaultData] = useState()
    //权限id
    const [upId, setUpId] = useState()
    //存储部门
    const [section, setSection] = useState()
    //表格编辑
    const edit = (row) => {
        setDefaultData(row.r_status)
        setUpId(row.r_id)
        setUp(true)
        setSection(row.r_bumen)
    }
    const handleChange = (ev) => {
        //console.log(123, ev.target.value)
        setUpData(ev.target.value)
        setDefaultData(ev.target.value)
    }
    //权限确定
    const quUp = () => {
        //console.log(234, upData)
        //console.log(66, defaultData)
        // if(upData===undefined){
        //     console.log(0)
        //     setUpData(ww)
        // }
        setUp(false)
        myAxios({
            url: "/roleStatus",
            method: "post",
            data: {
                r_id: upId,
                r_status: (upData === undefined) ? defaultData : upData,
                r_bumen: section
            }
        }).then(res => {
            if (res.data.status === 200) {
                userList()
                message.success('修改成功')
            } else {
                message.error('修改失败')
            }
        })
    }
    const onFinish = (values) => {
        //console.log(values);
        let myTime = getNewDate()
        setAdd(false)
        myAxios({
            url: "/roleAdd",
            method: "post",
            data: {
                r_bumen: values.userName,
                r_time: myTime
            }
        }).then(res => {
            if (res.data.status === 200) {
                userList()
                message.success('添加成功')
            } else {
                message.error('添加失败')
            }
        })
    };
    //获取初始数据
    const [data, setData] = useState()
    const userList = () => {
        myAxios({
            url: "/getRoleData",
            method: "post",
            data: {
            }
        }).then(res => {
            if (res.data.status === 200) {
                console.log(res.data.data)
                setData(res.data.data)
            } else {
                //跳转到404页面 
            }
        })
    }
    useEffect(() => {
        userList()
    }, [])
    //添加按刘1
    const addHw1 = () => {
        setAdd(true)
    }
    //删除按刘1
    const deleteHw1 = (values) => {
        if (values.r_number === '0') {
            console.log(11)
            setOpen(true)
            setDeleteId(values.r_id)
        } else {
            message.error('删除失败,数量不为0!')
        }

    }
    //删除按刘1
    const deleteHw2 = () => {
        setOpen(false)
        console.log(111, deleteId)
        myAxios({
            url: "/roleDel",
            method: "post",
            data: {
                r_id: deleteId
            }
        }).then(res => {
            console.log(9633, res)
            if (res.status === 200) {
                let arr = data.filter((item) => {
                    return item.r_id !== deleteId
                })
                setData(arr)
                message.success('删除成功')
            } else {
                message.error('删除失败')
            }
        })
    }
    return (
        <div style={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <div style={{ width: '97%', height: '96%', border: '1px solid #cccccc', borderRadius: '10px 10px 0 0', overflow: 'hidden' }}>
                <div style={{ width: '100%', height: '8%', backgroundColor: '#f3f3f3', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <span style={{ fontSize: '13px', marginLeft: '15px' }}>数据列表</span>
                    <button onClick={addHw1} style={{ width: '70px', height: '60%', marginRight: '15px', border: '1px solid #e4e4e4', borderRadius: '8px', fontSize: '13px', color: '#999999' }}>添加</button>
                </div>
                <div style={{ width: '100%', height: '92%' }}>
                    <Table columns={columns} dataSource={data} pagination={{ defaultPageSize: 8 }} rowKey={(record) => record.r_id} />
                </div>
            </div>
            <Modal
                title="确认提示"
                centered
                open={open}
                cancelText='取消'
                okText='确定'
                onOk={() => deleteHw2()}
                onCancel={() => setOpen(false)}
                width={400}
            >
                <div style={{ display: 'flex', marginTop: '20px', alignItems: 'center' }}>
                    <CheckCircleTwoTone twoToneColor='red' style={{ fontSize: '40px' }} />
                    <div style={{ display: 'flex', flexDirection: 'column', marginLeft: '10px' }}>
                        <span>系统提示</span>
                        <span>确定要删除该角色吗？</span>
                    </div>
                </div>
            </Modal>
            <Modal
                title="确认提示"
                centered
                open={add}
                cancelText='取消'
                okText='确定'
                onOk={() => setAdd(false)}
                onCancel={() => setAdd(false)}
                footer={null}
                width={500}
            >
                <div style={{ height: "200px", position: 'relative' }}>
                    <Form
                        {...layout}
                        form={form}
                        name="register"
                        onFinish={onFinish}
                        style={{
                            maxWidth: 600,
                            display: 'flex',
                            flexDirection: 'column',
                            marginTop: '30px'
                        }}
                    >
                        <Form.Item
                            name="userName"
                            label="角色名称"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入角色名称!',
                                },
                            ]}
                        >
                            <Input placeholder="输入角色名称" style={{ width: "250px" }} />
                        </Form.Item>
                        <Form.Item
                            label="描述"
                            name='hh'
                            rules={[
                                {
                                    required: true,
                                    message: '请输入内容!',
                                },
                            ]}
                        >
                            <TextArea rows={3} style={{ width: "250px", }} placeholder="输入内容" />
                        </Form.Item>
                        <Form.Item style={{ position: 'absolute', top: '160px', right: '52px' }}>
                            <Button type="primary" htmlType="submit" >
                                确定
                            </Button>
                        </Form.Item>
                    </Form>
                    <Button onClick={() => setAdd(false)} style={{ position: 'absolute', right: '140px', top: '160px' }}>取消</Button>
                </div>
            </Modal>
            <Modal
                title="确认提示"
                centered
                open={up}
                cancelText='取消'
                okText='确定'
                onOk={() => quUp()}
                onCancel={() => setUp(false)}
                width={400}
            >
                <div style={{ marginTop: '20px' }}>
                    <span>是否启用 :</span>&nbsp;&nbsp;
                    {/*checked = {defaultData === '禁止'}*/}
                    <Radio.Group onChange={handleChange} value={defaultData}>
                        <Radio value={'启用'}>启用</Radio>
                        <Radio value={'禁止'}>禁止</Radio>
                    </Radio.Group>
                </div>
            </Modal>
        </div>
    )
}

export default RoleManagement